Skip to main content

Bigger Cat Item Buttons

Note: this is an additional version of the cat-wrapper. It can be done 4 ways. You can add as many cat-button divs as you want inside of the bigger-cat-buttons div, they will make a row on the page.

Option 1 - Image only​

<div class="bigger-cat-buttons">
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
        </a>
    </div>
</div>

opt1-banner

Option 2 - Image, Title & Button​

<div class="bigger-cat-buttons">
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
            <h2 class="centered">**title goes here**</h2>
            <div class="button primary centered larger">Shop Now</div>
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
            <h2 class="centered">**title goes here**</h2>
            <div class="button primary centered larger">Shop Now</div>
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <h2 class="centered">**title goes here**</h2>
            <div class="button primary centered larger">Shop Now</div>
        </a>
    </div>
</div>

opt1-banner

Option 3 - Image & Title​

<div class="bigger-cat-buttons">
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
            <h2 class="centered">**title goes here**</h2>
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
            <h2 class="centered">**title goes here**</h2>
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
             <h2 class="centered">**title goes here**</h2>
        </a>
    </div>
</div>

opt1-banner

Option 4 - Image & Button​

<div class="bigger-cat-buttons">
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
             <div class="button primary centered larger">Shop Now</div>
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
            <div class="button primary centered larger">Shop Now</div>
        </a>
    </div>
    <div class="cat-button">
        <a href="#">
            <img src="**img src goes here**" alt="">
             <div class="button primary centered larger">Shop Now</div>
        </a>
    </div>
</div>

opt1-banner